// 入馆趋势折线图
(function () {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector('.bigEcharts .line'))
    // 指定图表的配置项和数据
    option = {
        color: ['#2953ff'],
        xAxis: {
            interval: 0,  // 显示全部刻度
            boundaryGap: false,
            type: 'category',
            data: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00'],

            axisTick: {
                show: false, // 去除刻度线
            },
            axisLabel: {
                color: '#fff',
                fontSize: 6,
            },
        },
        yAxis: {
            type: 'value',
            scale: true,
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: '#6d83bb',
                    width: 0.2
                }
            },
            axisLabel: {
                color: '#fff',
                fontSize: 6
            }
        },
        series: [
            {
                data: [0, 500, 200, 100, 400, 50, 600, 700, 50, 100, 120, 0, 80],
                type: 'line',
                symbol: "none",
                areaStyle: {},
                markLine: {
                    symbol: ['none', 'none'],
                    label: { show: false },
                    data: [{ xAxis: 6 }, { xAxis: 9 }],
                    color: 'pink'
                },
                // areaStyle: {
                //     // backgroundColor: 'rgba(31, 167, 109, 0.4)'
                // },
            }
        ],
        visualMap: {
            type: 'piecewise',
            show: false,
            dimension: 0,
            seriesIndex: 0,
            pieces: [
                {
                    gt: 6,
                    lt: 9,
                    color: 'rgba(33, 186, 114, 0.4)'
                },
                {
                    gt: 0,
                    lt: 6,
                    color: 'rgba(21, 57, 151, 0.4)'
                },
                {
                    gt: 9,
                    lt: 12,
                    color: 'rgba(21, 57, 151, 0.4)'
                }
            ]
        },


    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize()
    })
})();
// 五大类馆藏占比饼图
(function () {
    var myChart = echarts.init(document.querySelector('.collectionPies'))
    option = {
        color: ['#2A26FF', '#FF8045', '#D049F2', '#56FF2C', '#DFE781'],
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [

            {
                type: 'pie',
                radius: ['50%', '75%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 5 },
                    { value: 7 },
                    { value: 64 },
                    { value: 18 },
                    { value: 5 }
                ],
                padAngle: 5,
            }
        ]
    };
    myChart.setOption(option)

    window.addEventListener('resize', function () {
        myChart.resize()
    })

})();
// 流通占比饼图
(function () {
    var myChart = echarts.init(document.querySelector('.circulationRatioPie'))
    option = {
        // legend: {
        //     top: '5%',
        //     left: 'center'
        // },
        series: [
            {
                type: 'pie',
                radius: ['20%', '40%'],
                data: [
                    { value: 35, name: '续借' },
                    { value: 15, name: '归还' },
                    { value: 30, name: '借阅' },
                    { value: 20, name: '逾期' },
                ],
                itemStyle: {
                    borderWidth: 2, // 设置边界线宽度
                    borderColor: '#fff',// 设置边界线颜色
                    normal: {
                        color: function (params) {
                            // 预定义的颜色数组
                            var colorList = [
                                '#0ff8a4', '#81c4e4', '#f2b949', '#35fbf4'
                            ];
                            // 返回在数组中的颜色
                            return colorList[params.dataIndex % colorList.length];
                        }
                    }
                },
                label: {
                    normal: {
                        textStyle: {
                            color: '#fff', // 字体颜色
                            fontSize: 8  // 字体大小
                        }
                    }
                }
            },

        ]
    };
    myChart.setOption(option)
    window.addEventListener('resize', function () {
        myChart.resize()
    })
})();
// 借阅趋势借阅量折线图
(
    function () {
        var myChart = echarts.init(document.querySelector('.LendAmountLine'))
        option = {
            // grid: {
            //     containLabel: true
            // },
            // 其他配置项...

            xAxis: {
                boundaryGap: false,
                type: 'category',
                data: ['07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00'],
                axisTick: {
                    show: false, // 去除刻度线
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 6,
                    interval: 0
                },
                axisLine: false

            },
            yAxis: {
                show: false,
                interval: 100,
                type: 'value',
                axisLabel: {
                    color: '#fff',
                    fontSize: 6,
                    interval: 0
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        type: 'dashed',
                        color: '#6d83bb',
                        width: 0.2
                    }
                },
            },
            grid: {
                left: '10%',
                top: '10%',
                right: '10%',
                bottom: '10%'
            },
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130],
                    itemStyle: {
                        // 分别设置柱子左上、右上、右下、左下的圆角
                        borderRadius: [5, 5, 5, 5],
                        // 设置柱子宽度
                    },
                    barWidth: '25%',
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1, // 渐变方向：从上到下
                        [
                            { offset: 0, color: '#323049' },
                            { offset: 0.5, color: '#f3501a' },
                            { offset: 1, color: '#fde364' }
                        ]
                    ),
                },
                {
                    name: '增长率',
                    type: 'line',
                    data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130],
                    yAxisIndex: 0,
                    smooth: false,
                    // 设置折线颜色
                    lineStyle: {
                        color: '#ff9c54', // 这里设置为红色
                        width: 1, // 线宽
                        type: 'solid' // 线型
                    },
                    // 设置折线点的样式
                    itemStyle: {
                        normal: {
                            // 设置折线点的颜色
                            color: '#b67f39',
                            // 设置折线点的边框颜色
                            borderColor: '#9d7439',
                            // 设置折线点的边框宽度
                            borderWidth: 1
                        }
                    },
                    // 设置折线点的大小
                    itemSize: 3
                },
            ]
        };
        myChart.setOption(option)
        window.addEventListener('resize', function () {
            myChart.resize()
        })
    }

)();
// 借阅趋势折线图下部分
(function () {
    var myChart = echarts.init(document.querySelector('.LendAmountLineBottom'))
    option = {
        xAxis: {
            show: false,
            boundaryGap: false,
            type: 'category',
            data: ['07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00'],
            axisTick: {
                show: false, // 去除刻度线
            },
            axisLabel: {
                color: '#fff',
                fontSize: 6,
                interval: 0
            },
            axisLine: false

        },
        yAxis: {
            inverse: true,
            show: false,
            interval: 100,
            type: 'value',
            axisLabel: {
                color: '#fff',
                fontSize: 6,
                interval: 0
            },
            splitLine: {
                show: false,
                lineStyle: {
                    type: 'dashed',
                    color: '#6d83bb',
                    width: 0.2
                }
            },
        },
        grid: {
            left: '10%',
            top: '10%',
            right: '10%',
            bottom: '10%'
        },
        series: [
            {
                name: '销量',
                type: 'bar',
                data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130],
                itemStyle: {
                    // 分别设置柱子左上、右上、右下、左下的圆角
                    borderRadius: [5, 5, 5, 5],
                    // 设置柱子的颜色
                    color: '#1cfff1'

                },
                // 设置柱子宽度
                barWidth: '25%',

            },
            {
                name: '增长率',
                type: 'line',
                data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130],
                yAxisIndex: 0,
                // smooth: true,
                // 设置折线颜色
                lineStyle: {
                    color: '#259bff', // 这里设置为红色
                    width: 1, // 线宽
                    type: 'solid' // 线型
                },
                // 设置折线点的样式
                itemStyle: {
                    normal: {
                        // 设置折线点的颜色
                        color: '#259bff',
                        // 设置折线点的边框颜色
                        borderColor: '#259bff',
                        // 设置折线点的边框宽度
                        borderWidth: 1
                    }
                },
                // 设置折线点的大小
                itemSize: 3
            },
        ]
    };
    myChart.setOption(option)
    window.addEventListener('resize', function () {
        myChart.resize()
    })
})()


var backdrop6 = new Empile(demo6El, {
    waitForTransition: true,
    autoplay: {
        delay: 6000,
        docHiddenOff: {
            delay: 4000,
        }
    },
    navigation: {
        nextEl: $('.demo6 .btn-right'),
        prevEl: $('.demo6 .btn-left'),
    },
    css: (coord, absCoord, index) => {
        var zIndex = 100 - absCoord, translateX = 'translateX(' + (demo6FirstSlideW + 20) * coord + 'px)'; var transform = translateX; return {
            'z-index': zIndex, transform: transform,
        }
    },
});
